<template>
  <a-modal
    centered
    v-model="visible"
    @cancel="cancel"
    title="服务项登记"
    width="75%"
  >
    <template slot="footer">
      <a-button
        @click="cancel"
        style="background: #d7d7d7; color: #fff; border: none"
        >取消</a-button
      >
      <a-button
        v-if="terminal != '2' && reappearanceData.length * 1 !== 0 && btnFlag"
        :loading="loading"
        type="primary"
        @click="handleOk"
        >保存</a-button
      >
      <a-button
        v-if="
          terminal != '2' &&
          reappearanceData.length * 1 !== 0 &&
          port === 'warehouse' &&
          btnFlag
        "
        :loading="loading"
        type="danger"
        @click="resetService"
        >重置服务项</a-button
      >
    </template>
    <!-- 表格 -->
    <!-- <h3>服务项登记</h3> -->
    <a-spin tip="Loading..." :spinning="spinning">
      <h3>费用总计：{{ total }} {{ currency }}</h3>
      <a-table
        size="small"
        bordered
        :data-source="reappearanceData"
        :pagination="false"
        :scroll="{ x: 1200 }"
      >
        <a-table-column
          key="serviceName"
          data-index="serviceName"
          align="center"
          width="10%"
        >
          <span slot="title">服务名称</span>
          <template slot-scope="text, record">
            {{ record.serviceName }}
          </template>
        </a-table-column>
        <!-- 数量单位 -->
        <a-table-column
          key="quantity"
          data-index="quantity"
          align="center"
          width="8%"
        >
          <span slot="title">数量</span>
          <template slot-scope="text, record">
            <a-input-number
              v-if="record.serviceName != '清关规则'"
              style="width: 100%"
              :min="0"
              @change="changeQuantity(record)"
              :disabled="terminal === '2' || !btnFlag"
              placeholder="数量"
              v-model="record.quantity"
            />
            <span v-if="record.serviceName === '清关规则'"> 无 </span>
          </template>
        </a-table-column>
        <!-- 服务选择 -->
        <a-table-column
          key="ruleId"
          data-index="ruleId"
          align="center"
          width="14%"
        >
          <span slot="title">服务选择</span>
          <template slot-scope="text, record">
            {{ record.ruleName }}
          </template>
        </a-table-column>
        <!-- 额外规则 -->
        <a-table-column
          key="ewaiguize"
          data-index="ewaiguize"
          align="center"
          width="55%"
        >
          <span slot="title">额外规则</span>
          <template slot-scope="text, record">
            <div
              style="display: flex; justify-content: space-around"
              class="service-total"
              v-for="(item, index) in record.extraList"
              :key="index"
            >
              <!-- //是否超重 -->
              <span
                v-if="
                  record.serviceType == '0' ||
                  record.serviceType == '7' ||
                  record.serviceType == '3' ||
                  record.serviceType == '4' ||
                  record.serviceType === '14' ||
                  record.serviceType === '15' ||
                  record.serviceType === '22'
                "
                >是否超重：<span>{{
                  item.isOverweight == "0" ? "是" : "否"
                }}</span></span
              >
              <!-- //是否预报 -->
              <span v-if="record.serviceType == '16'"
                >是否预报：<span>{{
                  item.isForecast == "0" ? "是" : "否"
                }}</span></span
              >
              <!-- //预报数量： -->
              <span v-if="record.serviceType == '16'"
                >预报数量：<span>{{ item.isForecastNum || "--" }}</span></span
              >
              <!-- //是否混装 -->
              <span
                v-if="
                  record.serviceType == '16' ||
                  record.serviceType == '17' ||
                  record.serviceType == '22'
                "
                >是否混装：<span>{{
                  item.isAssortedPacking == "0" ? "是" : "否"
                }}</span></span
              >
              <!-- //混装数量： -->
              <span
                v-if="
                  record.serviceType == '16' ||
                  record.serviceType == '17' ||
                  record.serviceType == '22'
                "
                >混装数量：<span>{{
                  item.isAssortedPackingNum || "--"
                }}</span></span
              >
              <!-- //超重数量： -->
              <span
                v-if="
                  record.serviceType == '0' ||
                  record.serviceType == '7' ||
                  record.serviceType == '3' ||
                  record.serviceType == '4' ||
                  record.serviceType == '22'
                "
                >超重数量：<span>{{ item.overweightTotal || "--" }}</span></span
              >
              <!-- //范围 -->
              <span
                v-if="
                  record.serviceType == '0' ||
                  record.serviceType == '3' ||
                  record.serviceType == '4'
                "
                >范围：<span>{{ item.extraTitle || "--" }}</span></span
              >
              <!-- //是否超箱： -->
              <span
                v-if="
                  record.serviceType == '0' ||
                  record.serviceType == '3' ||
                  record.serviceType == '4'
                "
                >是否超箱：<span>{{
                  item.isExceedBox == "0" ? "是" : "否"
                }}</span></span
              >
              <!-- //超箱箱数： -->
              <span
                v-if="
                  record.serviceType == '0' ||
                  record.serviceType == '3' ||
                  record.serviceType == '4'
                "
                >超箱箱数：<span>{{ item.exceedBoxTotal || "--" }}</span></span
              >
              <!-- //是否超长： -->
              <span
                v-if="record.serviceType == '7' || record.serviceType === '15'"
                >是否超长：<span>{{
                  item.isOverlength == "0" ? "是" : "否"
                }}</span></span
              >
              <!-- //超长数量： -->
              <span v-if="record.serviceType == '7'"
                >超长数量：<span>{{ item.overlengthTotal || "--" }}</span></span
              >
              <!-- //是否滞仓： -->
              <span
                v-if="record.serviceType == '8' || record.serviceType == '9'"
                >是否滞仓：<span>{{
                  item.isRetention == "0" ? "是" : "否"
                }}</span></span
              >
              <!-- //滞仓天数： -->
              <span
                v-if="record.serviceType == '8' || record.serviceType == '9'"
                >滞仓天数：<span>{{ item.retention || "--" }}</span></span
              >
              <!-- //不规则贴标： -->
              <span v-if="record.serviceType == '11'"
                >不规则贴标：<span>{{
                  item.isNoNorm === "0" ? "是" : "否"
                }}</span></span
              >
              <!-- //不规则贴标数量 -->
              <span v-if="record.serviceType == '11'"
                >不规则贴标数量：<span>{{ item.noNormNum || "--" }}</span></span
              >
              <!-- //是否无预报 -->
              <span v-if="record.serviceType == '11'"
                >是否无预报：<span>{{
                  item.isNoForecast === "0" ? "是" : "否"
                }}</span></span
              >
              <!-- //无预报数量 -->
              <span v-if="record.serviceType == '11'"
                >无预报数量：<span>{{
                  item.isNoForecastNum || "--"
                }}</span></span
              >
              <!-- //普通订单 -->
              <span v-if="record.serviceType == '14'"
                >是否自有运单：<span>{{
                  item.isSelfWaybill === "0" ? "是" : "否"
                }}</span></span
              >
              <!-- //是否国际订单： -->
              <span v-if="record.serviceType == '14'"
                >是否国际订单：<span>{{
                  item.isInternational === "0" ? "是" : "否"
                }}</span></span
              >
              <!-- 是否复合重量： -->
              <span v-if="record.serviceType == '14'"
                >是否复合重量：<span>{{
                  item.isCompositeWeight === "0" ? "是" : "否"
                }}</span></span
              >
            </div>
            <!-- HS Code超出数量： -->
            <span
              style="margin-right: 10px"
              v-if="record.serviceType == '10' && record.ruleId === '13'"
              >HS Code超出数量：<span>{{ record.quantity }}</span></span
            >
            <span
              style="margin-right: 10px"
              v-if="record.serviceType == '10' && record.ruleId === '0'"
              >垫付收费：<span>{{ record.quantity }}</span></span
            >
          </template>
        </a-table-column>
        <!-- 费用 -->
        <a-table-column align="center" width="11%">
          <span slot="title">费用</span>
          <template slot-scope="text, record">
            <a-input-number
              :disabled="terminal === '2' || !btnFlag"
              :min="0"
              placeholder="费用"
              style="width: 100%"
              v-model="record.actualPrice"
              :formatter="
                (value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
              "
              :parser="(value) => `${value}`.replace(/\$\s?|(,*)/g, '')"
              :precision="6"
            />
          </template>
        </a-table-column>
        <!-- 币种 -->
        <a-table-column align="center" width="7%">
          <span slot="title">币种</span>
          <template slot-scope="text, record">
            {{ record.settlementCurrencyName }}
          </template>
        </a-table-column>
      </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
import {
  ser_reappearance,
  ser_editReappearance,
  ser_removeService,
} from "@/apis/clientSide/OrderManage/TransferIn";
export default {
  props: [
    "getModalData",
    "modalFlag",
    "inputShow",
    "transferWarehousingApplyId",
  ],
  data() {
    return {
      currency: "",
      total: 0,
      tenantId: "",
      applyId: "",
      visible: false,
      //复现表格数据
      reappearanceData: [],
      loading: false,
      spinning: false,
      schemeIdEndTime: null,
      schemeIdStartTime: null,
      tenantSchemeId: null,
      business: null,
      terminal: sessionStorage.getItem("terminal"),
      // 取消按钮，输入框标杆
      btnFlag: undefined,
      //端口标杆
      port: "",
    };
  },
  mounted() {
    this.$bus.$off("reappearance");
    this.$bus.$on(
      "reappearance",
      async (row, business, applyId, btnFlag, port) => {
        this.port = port;
        this.btnFlag = btnFlag;
        this.tenantId = row.tenantId;
        this.business = business;
        this.applyId = applyId;
        this.getReappearanceList(business);
        this.visible = true;
      }
    );
  },
  methods: {
    //重置服务项
    resetService() {
      let _this = this;
      this.$confirm({
        title: "确定要删除此服务项登记吗?",
        cancelText: "取消",
        okText: "确定",
        onOk() {
          return new Promise((resolve, reject) => {
            setTimeout(async () => {
              let { code } = await ser_removeService(
                _this.business,
                _this.applyId
              );
              if (code === "10000") {
                if (_this.business === 2 || _this.business === 3) {
                  resolve();
                  _this.visible = false;
                  _this.getModalData(_this.applyId);
                  return false;
                } else if (_this.business === 5) {
                  _this.$emit("updateModalData", 2);
                  resolve();
                  _this.visible = false;
                } else if (_this.business === 0) {
                  _this.getModalData(_this.transferWarehousingApplyId);
                  resolve();
                  _this.visible = false;
                } else if (_this.business === 1) {
                  _this.$emit("isUpdate", 0);
                  resolve();
                  _this.visible = false;
                } else if (_this.business === 7) {
                  _this.getModalData();
                  _this.visible = false;
                  resolve();
                } else if (_this.business === 6) {
                  _this.$emit("workOrderUpdate", 0);
                  resolve();
                  _this.visible = false;
                }
              } else {
                reject();
              }
            }, 1000);
          }).catch(() => console.log("Oops errors!"));
        },
        onCancel() {},
      });
    },
    //改变数字
    changeQuantity(record) {
      if (record.quantity == null) {
        record.quantity = 0;
      }
    },
    //查询复现数据
    async getReappearanceList(business) {
      this.reappearanceData = [];
      this.spinning = true;
      let res = await ser_reappearance(business, this.applyId);
      if (res.code == "200") {
        this.reappearanceData = res.responseBody;
        if (res.responseBody && res.responseBody.length !== 0) {
          this.currency = res.responseBody[0].settlementCurrencyName;
        }
        this.total = 0;
        this.reappearanceData.forEach((item) => {
          this.total += item.actualPrice * 1;
        });
        this.total = this.total.toFixed(6);
        this.spinning = false;
      }
    },
    cancel() {
      this.visible = false;
      setTimeout(() => {
        this.reappearanceData = [];
      }, 50);
    },
    async handleOk() {
      this.loading = true;
      let res = await ser_editReappearance(
        this.business,
        this.applyId,
        this.reappearanceData
      );
      if (res.code == "10000") {
        this.loading = false;
        this.cancel();
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.service-total {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  .icon-list {
    width: 60px;
    display: flex;
    align-items: center;
    i {
      font-size: 24px;
    }
    i:first-child {
      margin-right: 8px;
    }
  }
}
.service-total2 {
  display: flex;
  span {
    width: 100%;
    text-align: left;
  }
}
/deep/.ant-modal-footer {
  text-align: center !important;
  button {
    margin: 0 50px;
  }
}
</style>
